
<style>
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    width: 270px;
    height: 35px;
    background: #f7f8f9;
    color:#060606;
    border-radius: 3px;
    float: left;
    position: absolute;
    align-items: center;
    text-align: center;
    font-family: Alimama ShuHeiTi;
    font-size: 25px;
    font-weight: bold;
    line-height: normal;
    text-align: center;
    letter-spacing: 0em;
    top:17px;
    left:20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
</style>
<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                  <div class="layout-logo">学生成绩管理系统</div>
                    <div class="layout-nav">
                        <MenuItem name="1">
                            <Icon type="ios-navigate"></Icon>
                            学生管理
                        </MenuItem>
                        <MenuItem name="2">
                            <Icon type="ios-keypad"></Icon>
                            成绩管理
                        </MenuItem>
                        <MenuItem name="3">
                            <Icon type="ios-analytics"></Icon>
                            课程管理
                        </MenuItem>
                        <MenuItem name="4">
                            <Icon type="ios-paper"></Icon>
                            日志审计
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Layout>
                <Sider hide-trigger :style="{background: '#fff'}">
                    <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                        <Submenu name="1">
                            <template #title>
                                <Icon type="ios-navigate"></Icon>
                                学生管理
                            </template>
                            <MenuItem name="1-1"><router-link to="infor">查看个人信息</router-link></MenuItem>
                            <MenuItem name="1-2"><router-link to="cginfor">修改个人信息</router-link></MenuItem>
                            <MenuItem name="1-3"><router-link to="home">查看成绩表</router-link></MenuItem>
                        </Submenu>
                        <Submenu name="2">
                            <template #title>
                                <Icon type="ios-keypad"></Icon>
                                成绩管理
                            </template>
                            <MenuItem name="2-1"><router-link to="gradelis">成绩分析</router-link></MenuItem>
                            <MenuItem name="2-2"><router-link to="home">查看成绩表</router-link></MenuItem>
                        </Submenu>
                        <Submenu name="3">
                            <template #title>
                                <Icon type="ios-analytics"></Icon>
                                课程管理
                            </template>
                            <MenuItem name="3-1"><router-link to="course">查看课程表</router-link></MenuItem>
                            <MenuItem name="3-2"><router-link to="cgcourse">修改课程表</router-link></MenuItem>
                        </Submenu>
                        <Submenu name="4">
                            <template #title>
                                <Icon type="ios-analytics"></Icon>
                                日志审计
                            </template>
                        </Submenu>
                    </Menu>
                </Sider>
                <Layout :style="{padding: '0 24px 24px'}">
                    <Breadcrumb :style="{margin: '24px 0'}">
                        <BreadcrumbItem><router-link to="home">主页</router-link></BreadcrumbItem>
                        <BreadcrumbItem>课程管理</BreadcrumbItem>
                        <BreadcrumbItem>修改课程表</BreadcrumbItem>
                    </Breadcrumb>
                    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                        <Table border :columns="columns" :data="data"></Table>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    import { resolveComponent } from 'vue';
    export default {
        data () {
            return {
                columns: [
                    {
                        title:'课程名称',
                        key:'课程名称'

                    },
                    {
                        title:'课程编号',
                        key:'课程编号'

                    },
                    {
                        title:'学分',
                        key:'学分'

                    },
                    {
                        title:'学时',
                        key:'学时'

                    },
                    {
                        title:'上课时间',
                        key:'上课时间'
                    },
                    {
                        title: '上课地点',
                        key: '上课地点'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 180,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h(resolveComponent('Button'), {
                                    type: 'primary',
                                    size: 'small',
                                    style: {
                                        marginRight: '5px'
                                    },
                                    onClick: () => {
                                        this.show(params.index)
                                    }
                                }, {
                                    default() {
                                        return 'View'
                                    }
                                }),
                                h(resolveComponent('Button'), {
                                    type: 'error',
                                    size: 'small',
                                    onClick: () => {
                                        this.remove(params.index)
                                    }
                                }, {
                                    default() {
                                        return 'Delete'
                                    }
                                })
                            ]);
                        }
                    }
                ],
                data: [
                    {
                        "课程名称": "网络应用技术",
                        "课程编号": 20000001,
                        "学时": '54',
                        "学分":"3",
                        "上课时间":'周一至周五',
                        "上课地点":'A区134'
                    },
                    {
                        "课程名称": "网络运维管理",
                        "课程编号": 20000002,
                        "学时": '54',
                        "学分":"3",
                        "上课时间":'周一至周五',
                        "上课地点":'A区230'
                    },
                    {
                        "课程名称": "Linux操作系统",
                        "课程编号": 20000003,
                        "学时": '54',
                        "学分":"3",
                        "上课时间":'周一至周五',
                        "上课地点":'A区312'
                    },
                    {
                        "课程名称": "云计算与虚拟化技术",
                        "课程编号": 20000004,
                        "学时": '54',
                        "学分":"3",
                        "上课时间":'周一至周五',
                        "上课地点":'A区504'
                    },
                    {
                        "课程名称": "C语言程序设计",
                        "课程编号": 20000005,
                        "学时": '54',
                        "学分":"3",
                        "上课时间":'周一、周二、周四',
                        "上课地点":'A区604'
                    },
                    {
                        "课程名称": "数据结构",
                        "课程编号": 20000009,
                        "学时": '72',
                        "学分":"3",
                        "上课时间":'周三、周五',
                        "上课地点":'A区307'
                    },
                    {
                        "课程名称": "中医药学概论",
                        "课程编号": 20000010,
                        "学时": '54',
                        "学分":"2",
                        "上课时间":'周一至周五',
                        "上课地点":'A区332'
                    },
                    {
                        "课程名称": "数据库原理",
                        "课程编号": 20000012,
                        "学时": '54',
                        "学分":"3",
                        "上课时间":'周二、周四、周五',
                        "上课地点":'A区207'
                    },
                    {
                        "课程名称": "Web前端开发",
                        "课程编号": 20000016,
                        "学时": '54',
                        "学分":"3",
                        "上课时间":'周一至周五',
                        "上课地点":'A区420'
                    },
                    {
                        "课程名称": "体育C",
                        "课程编号": 20000100,
                        "学时": '54',
                        "学分":"1",
                        "上课时间":'周一至周五',
                        "上课地点":'西操场'
                    },
                    {
                        "课程名称": "高等数学B",
                        "课程编号": 20000019,
                        "学时": '54',
                        "学分":"3",
                        "上课时间":'周一至周五',
                        "上课地点":'A区514'
                    }
                ]
            }
        },
        methods: {
            show (index) {
                this.$Modal.info({
                    title: '课程信息',
                    content: `课程名称:${this.data[index].课程名称}<br>课程编号:${this.data[index].课程编号}<br>学时:${this.data[index].学时}<br>学分:${this.data[index].学分}<br>上课时间:${this.data[index].上课时间}<br>上课地点:${this.data[index].上课地点}`
                })
            },
            remove (index) {
                this.data.splice(index, 1);
            }
        }
    }
</script>